<template>
  <div class="registere">
    <van-field
      left-icon="friends-o"
      v-model="identity"
      placeholder="身份类别"
      @focus="focus"
      readonly
    />
    <van-action-sheet
      v-model:show="typeShow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
    <van-action-sheet
      v-model:show="academyShow"
      :actions="academyList"
      @select="onMyAcadeList"
      cancel-text="取消"
    />
    <van-cell-group>
      <van-field
        left-icon="bag-o"
        v-if="type != null"
        v-model="collegeName"
        placeholder="学院"
        @focus="academySelect"
        readonly
      />
      <van-field
        left-icon="fire-o"
        v-if="type != null"
        v-model="name"
        placeholder="姓名"
      />
      <van-field
        v-if="type === 1"
        left-icon="home-o"
        v-model="grade"
        placeholder="班级"
      />
      <van-field
        v-if="type != null"
        left-icon="bulb-o"
        v-model="number"
        :placeholder="type === 1 ? '学号' : '教师编号'"
      />
    </van-cell-group>

    <div class="button">
      <van-button round size="large" type="primary" text="确认" @click="confim" />
      <!-- loading-text="加载中..." -->
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, ref } from "vue";
import { lists, userInfos } from "../../data/userInfo";
import { userRegister } from "../../network/axios";
import { Notify } from "vant";

export default {
  name: "Registere",
  setup() {
    let userInfo = reactive({
      type: null,
      grade: "",
      collegeName: "",
      number: "",
      name: "",
      collegeId: "",
    });
    let identity = ref("");
    let loading = ref(false);
    const academyList = lists;
    const typeShow = ref(false); // 身份类别选择显示
    const academyShow = ref(false);
    const actions = [
      { name: "学生", type: 1 },
      { name: "教职工", type: 2 },
    ];
    const focus = () => {
      typeShow.value = true;
    };
    console.log(lists, "lists");
    const onSelect = (item) => {
      clearUserInfo();

      typeShow.value = false;
      userInfo.type = item.type;
      identity.value = item.name;
    };
    const onMyAcadeList = (item) => {
      // 学院选择
      console.log(item);
      userInfo.collegeName = item.name;
      userInfo.collegeId = item.id;
      academyShow.value = false;
    };
    const clearUserInfo = () => {
      identity.value = "";
      userInfo.type = NaN;
      userInfo.grade = "";
      userInfo.collegeName = "";
      userInfo.number = "";
      userInfo.name = "";
    };
    const academySelect = () => {
      academyShow.value = true;
    };
    const confim = async () => {
      if (!identity.value) return Notify(`请选择你的身份类别`);
      if (judgMent()) return Notify(`请填写${userInfos[judgMent()]}`);
      //   console.log(999);
      loading.value = true;
      const {
        data: { code },
      } = await userRegister(userInfo);
      console.log(code, "code");
      if (code == 200) {
        Notify({
          type: "success",
          message: "注册成功,等待管理员审核",
        });
      } else {
        Notify({
          type: "danger",
          message: "注册失败,请联系管理员",
        });
      }
      loading.value = false;
    };
    const judgMent = () => {
      const teacherJudgMent = ["collegeName", "name", "number"];
      const studentJudgMent = ["collegeName", "name", "grade", "number"];
      let emptyJud = "";
      switch (userInfo.type * 1) {
        case 1:
          emptyJud = studentJudgMent.find((item) => userInfo[item] == "");
          break;
        case 2:
          emptyJud = teacherJudgMent.find((item) => userInfo[item] == "");
          break;
      }
      return emptyJud;
    };
    return {
      ...toRefs(userInfo),
      focus,
      actions,
      typeShow,
      onSelect,
      identity,
      academySelect,
      academyShow,
      onMyAcadeList,
      academyList,
      confim,
      loading,
    };
  },
};
</script>
<style lang="scss" scoped>
.registere {
  margin-top: 0.25rem;
  padding: 0 0.25rem;
  ::v-deep .van-cell {
    margin-top: 10px;
  }
  ::v-deep .van-action-sheet {
    max-height: 40% !important;
  }
}
</style>
